<template>
    <div>
        <div v-for="news in news_list" :key="news.id" style="margin: 20px auto; width: 70%; text-align: center; font-size: 20px">
            <a href="" @click.prevent="newsIncrby(news.id)">{{news.title}}</a>
        </div>
        <div style="margin: 20px auto; width: 70%; text-align: center;">
            <a-pagination 
            :defaultCurrent="current_page"
            
            :total="total"
            @change="pageNum" />
        </div>
    </div>
</template>

<script>
import axios from 'axios'
export default {
    data() {
        return {
            current_page: 1,
            news_list: [],
            total: 0
        }
    },
    methods: {
        pageNum(page) {
            console.log(page)
            this.current_page = page
            this.acquireNews()
        },
        // 新闻增加点击量
        newsIncrby(news_id) {
            axios.get('http://127.0.0.1:8000/carthome/news_rank/?news_id='+ news_id).then(res => {
                console.log(res.data)
            })
        },
        // 获取新闻
        acquireNews() {
            axios.get('http://127.0.0.1:8000/carthome/cart_list/?current_page=' + this.current_page).then(res => {
                console.log(res.data)
                this.news_list = res.data.data
                this.total = res.data.total
            })
        }
    },
    created() {  // mounted
        // 页面加载完成之前去调用获取新闻 的方法
        this.acquireNews()
    }
}
</script>

<style scoped>

</style>
